
<template>
	<div class="risk-content">
		<div class="exam-title">
			<div class="un-exam">{{ data.ExamName }}</div>
		</div>
		<div class="exam-content">
			<div class="mb-10">
				总分：{{ data.TotalScore ? data.TotalScore + '.0' : '0.0' }}分
			</div>
			<div class="mb-10">
				达标：<span class="green-color"
					>{{ data.PassScore ? data.PassScore + '.0' : '0.0' }}分</span
				>
			</div>
			<div class="mb-10" v-if="data.ExamMins">
				限时：{{ data.ExamMins }}分钟
			</div>
			<div class="mb-10">发起人：{{ data.PublishUserChnName }}</div>
			<div class="mb-10">分配时间：{{ data.PublishTime }}</div>
			<div class="mb-10">开始时间：{{ data.ExamStartTime }}</div>
			<div class="mb-10">结束时间：{{ data.ExamEndTime }}</div>
			<div class="mb-10">总题目数：{{ data.TotalQuestionsDesc }}</div>
			<div class="mb-10">简介：</div>
			<eagle-divider />
			<div class="mb-10">
				考试规则说明：
				<div class="mt-10">
					<p class="mb-10 exam-desc">
						1.点击“进入考试”按钮即开始测评，开始计时，考试过程中不能最小化页面窗体。
					</p>
					<p class="mb-10 exam-desc">
						2.该考试允许多次重复考试，多次参加考试，以最高得分为准。
					</p>
					<p class="exam-desc">
						3.测试完毕后，可以提交试卷，系统自动判分，如果考试现在时间到期后未提交，系统将自动提交您的试卷。
					</p>
				</div>
			</div>
		</div>
		<template
			v-if="
				(data.Status == 20 && data.IsParticipated == false) ||
				(data.Status == 20 && data.IsAllowedRepeatExam)
			"
		>
			<div class="exam-btns green" @click="_goExam">开始考试</div>
		</template>
		<template v-else>
			<div
				class="exam-btns"
				v-if="data.Status < 20 && data.IsParticipated == false"
			>
				考试即将开始
			</div>
			<div
				class="exam-btns"
				v-if="data.Status == 30 && data.IsParticipated == false"
			>
				考试已过期
			</div>
			<div
				class="exam-btns orange"
				v-if="
					data.IsAllowedViewAnswer &&
					data.IsParticipated &&
					!data.IsAllowedRepeatExam
				"
				@click="_goExam"
			>
				查看考试结果
			</div>
			<div
				class="exam-btns orange"
				v-if="data.IsAllowedViewAnswer == false && data.IsParticipated"
			>
				考试已完成
			</div>
		</template>
	</div>
</template>

<script>
export default {
	data() {
		return {
			id: this.$route.query.id,
			loading: false,
			data: {},
		}
	},
	created() {
		this.getDetail()
	},
	// mounted() {
	// 	window.history.pushState(null, null, document.URL)
	// 	window.addEventListener('popstate', this.onBrowserBack, false)
	// },
	// destroyed() {
	// 	window.removeEventListener('popstate', this.onBrowserBack, false)
	// },
	methods: {
		// onBrowserBack() {
		// 	this.$router.replace('/Train/ExExam')
		// },
		getDetail() {
			let _this = this;
			_this.loading = true
			_this.$axios
			.get("/ExExam/GetDetail",{params:{id: _this.id}})
			.then((res) => {
				_this.loading = false
				_this.data = res.data
			})
		},
		_goExam() {
			this.$router.push('/Train/StartExam?id=' + this.data.ID)
		},
	},
}
</script>

<style lang="less" scoped>
.risk-content {
	background-color: #fff;
	min-height: 100vh;
}
.exam-title {
	height: 30px;
	background-color: #e8f1f8;
	line-height: 30px;
	padding: 0 10px;
	font-size: 14px;
	.un-exam {
		display: inline-block;
		height: 100%;
		border-bottom: 2px solid #333;
	}
}
.exam-content {
	padding: 10px;
	height: calc(100vh - 100px);
	font-size: 12px;
	color: #666;
	> div {
		line-height: 1.2;
	}
}
.exam-content::-webkit-scrollbar {
	display: none;
}
.exam-btns {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 50px;
	line-height: 50px;
	text-align: center;
	color: #fff;
	font-size: 14px;
	background-color: #ccc;
}
.green {
	background-color: green;
}
.green-color {
	color: green;
}
.orange {
	background-color: orange;
}
.exam-desc {
	line-height: 1.5;
}
</style>